<!--
 * @Author: '浪川' '1214391613@qq.com'
 * @Date: 2025-08-08 09:56:12
 * @LastEditors: '浪川' '1214391613@qq.com'
 * @LastEditTime: 2025-08-08 10:07:42
 * @FilePath: \passiflora-edulis-sims\src\components\CreateBook\CrossWordSettingComponent.vue
 * @Description:
 *
 * Copyright (c) 2025 by '1214391613@qq.com', All Rights Reserved.
-->

<script setup lang="ts">
import { useCrosswordStore } from 'src/stores/crossword-store'
import { useGlobalOptionStore } from 'src/stores/global-option-store'

const crossword_store = useCrosswordStore()
const globale_option_store = useGlobalOptionStore()
</script>

<template>
  <div>
    <div>
      <h5>字体设置</h5>
    </div>
    <div class="row">
      <div class="col-4 q-pb-sm q-pr-sm">
        <q-input
          outlined
          v-model="crossword_store.legend_type.text"
          label="单词提示标题"
          :input-style="{
            color: crossword_store.legend_type.font.font_color,
          }"
          ><template v-slot:append>
            <q-icon name="colorize" class="cursor-pointer">
              <q-popup-proxy
                cover
                transition-show="scale"
                transition-hide="scale"
              >
                <q-color
                  v-model="crossword_store.legend_type.font.font_color"
                />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </div>
      <div class="col-4 q-pb-sm q-pr-sm">
        <q-select
          outlined
          v-model="crossword_store.legend_type.font.font_name"
          :options="globale_option_store.font_names"
          label="字体"
        >
        </q-select>
      </div>
      <div class="col-4 q-pb-sm q-pr-sm">
        <q-input
          outlined
          type="number"
          v-model="crossword_store.legend_type.font.font_size"
          label="字号"
        >
        </q-input>
      </div>

      <div class="col-6 q-pb-sm q-pr-sm">
        <q-select
          outlined
          v-model="crossword_store.legend_type.text_align"
          :options="globale_option_store.text_aligns"
          label="字体水平方向"
        >
        </q-select>
      </div>
      <div class="col-6 q-pb-sm q-pr-sm">
        <q-select
          outlined
          v-model="crossword_store.legend_type.vertical_align"
          :options="globale_option_store.vertical_aligns"
          label="字体垂直方向"
        >
        </q-select>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
